<jsp:include page="../template/top.jsp"></jsp:include>

	<form id="form" action="${pageContext.request.contextPath}/reserva/lista/apartamentos" method="get">
	
		<div class="interfaceExterna">
			<h3><a href="#">Reserva</a></h3>
			<div>
				<div class="campo">
					<label>Tipo do Apartamento</label>
					<select id="tiposDeApartamento" name="reserva.apartamento.tipoApartamento.id">
						<option value="0">Todos</option>
						<c:forEach var="tipo" items="${tipos}">
							<option value="${tipo.id}">${tipo.nome}</option>
						</c:forEach>
					</select>
				</div>
				
				<div class="campo">
					<label>Data de Entrada</label>
					<input type="text" id="dataEntrada" class="datepicker" name="reserva.dataEntrada" value="<fmt:formatDate value='${reserva.dataEntrada}' pattern='dd/MM/yyyy' />" />
				</div>
				<div class="campo">
					<label>Data de Sa&iacute;da</label>
					<input type="text" id="dataSaida" class="datepicker" name="reserva.dataSaida" value="<fmt:formatDate value='${reserva.dataSaida}' pattern='dd/MM/yyyy' />" />
				</div>
				
			</div>
		</div>
		
		<br clear="all"/>
		
		<div class="botoes">
			<input type="submit" value="Buscar" id="botaoBuscar"/>
			<a href="${pageContext.request.contextPath}/reserva/lista" id="botaoVoltar">Listar</a>
		</div>
	
	

		<br clear="all" />
	
		<div class="interfaceExterna">
			<h3><a href="#">Apartamentos Dispon&iacute;veis</a></h3>
			<div>
				<table>
					<thead>
						<tr>
							<th width="50px" align="left"></th>
							<th width="150px" align="left">Apartamento</th>
							<th width="150px" align="left">Tipo</th>
							<th width="100px" align="left">Valor da di&aacute;ria</th>
						</tr>
					</thead>
					
					<tbody>
						<c:if test="${not empty apartamentoList}">
							<c:forEach var="apartamento" items="${apartamentoList}">
								<tr>
									<td width="50px" align="left">
											<div class="ui-state-default ui-corner-all" 
													onclick="escolhe(${apartamento.numero})" title="Reservar">
												<span class="ui-icon ui-icon-locked"></span>
											</div>
										</a>
									</td>
									
									<td width="150px" align="left"> ${apartamento.numero} </td>
									<td width="150px" align="left"> ${apartamento.tipoApartamento.nome} </td>
									<td width="100px" align="left"> <fmt:formatNumber currencySymbol="R$ " type="currency" value="${apartamento.tipoApartamento.valor}"></fmt:formatNumber> </td>
								</tr>
							</c:forEach>
						</c:if>
						<c:if test="${empty apartamentoList}">
							<tr>
								<td colspan="5">Nenhum apartamento dispon&iacute;vel no momento!</td>
							</tr>
						</c:if>
					</tbody>
				</table>
			</div>
		</div>
	</form>
	
<jsp:include page="../template/bottom.jsp"></jsp:include>

<script type="text/javascript">
	$('#tiposDeApartamento option[value=${reserva.apartamento.tipoApartamento.id}]').attr('selected', 'selected');

	function escolhe(apartamento) {
		document.location.href = '${pageContext.request.contextPath}/reserva/confirma/apartamento/' + apartamento + '/entrada/' + escape($('#dataEntrada').val()) + '/saida/' + escape($('#dataSaida').val());
	}
</script>